<!--自定义的弹框组件-->
<template>
  <input type="checkbox" id="my-modal" :checked="dialogVisible" class="modal-toggle"/>
  <div class="modal ">
    <div class="modal-box" :class="[customSize.high,customSize.width,customSize.max]">
      <button class="btn  btn-circle absolute right-0 top-0 border-transparent " @click="closed">✕</button>
      <h3 class="font-medium text-lg text-gray-600 absolute left-4 top-1">{{ title }}</h3>

      <div class="w-full h-full pt-2">
        <slot>
          <p>You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineEmits, defineProps, watch} from 'vue'

//父组件传值时的定义
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
    required: false
  },
  title: {
    type: String,
    default: "Title",
    required: false
  },
  customSize: {
    type: Object,
    default: {
      high: "",
      width: "",
      max: "",
    },
    required: false
  },
})

const emits = defineEmits([
  "open", "closed"
])

const open = () => emits('open')
const closed = () => emits('closed')

//监听dialogVisible的变化
watch(() => props.dialogVisible, (newVal, oldVal) => {
  if (newVal) open()
})

</script>

<style scoped>

</style>
